<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>财校官网案例</title>
	<link rel="stylesheet" href="./css/index(财校案例).css">
	<link rel="shortcut icon" href="./imges/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="./css/commom.css">
	<!-- 字体图标 -->
	<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4682886_eukaao6p4to.css">
</head>

<body>
	<!-- 头部区域 -->
	<div class="header">
		<div class="logo" title="江西财经职业学院">
			<img src="./imges/logo23.png" alt="" />
		</div>
		<div class="icon">
			<img class="icon1" src="./imges/search_but.png" title="搜索" />
			<img class="icon2" src="./imges/navimg.png" title="更多" />
		</div>
	</div>
	<!-- 轮播区域 -->
	<div id="banner">
		<img src="./imges/zhutixuexijiaoyu.png" />
		<!-- 指示点 -->
		<div class="dots">
			<span class="dot selected"></span>
			<span class="dot"></span>
			<span class="dot"></span>
			<span class="dot"></span>
			<span class="dot"></span>
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
	</div>

	<div class="contianer">
		<!-- 4大标题开始 -->
		<div class="hd">
			<ul class="clearfix">
				<li class="f1">
					<span class="hd-li-h">财院</span>
					<span class="hd-li-b">新闻</span>
					<span class="hd-li-b hd-li-b1">/</span>
					<span class="hd-li-hs">News</span>
				</li>
				<li class="f1">
					<span class="hd-li-h">通知</span>
					<span class="hd-li-b">公告</span>
					<span class="hd-li-b hd-li-b1">/</span>
					<span class="hd-li-hs">Notice</span>
				</li>
				<li class="f1">
					<span class="hd-li-h">媒体</span>
					<span class="hd-li-b">关注</span>
					<span class="hd-li-b hd-li-b1">/</span>
					<span class="hd-li-hs">Media</span>
				</li>
				<li class="f1 on">
					<span class="hd-li-h">财院</span>
					<span class="hd-li-b">视频</span>
					<span class="hd-li-b hd-li-b1">/</span>
					<span class="hd-li-hs">Video</span>
				</li>
			</ul>
		</div>
		<!-- 4大标题结束 -->

		<!-- 4大标题下内容开始 -->
		<div class="bd" id="app">
			<ul>
				<li class="bd-li-f1" v-for="item in newsData" :key="item.id">
					<div class="a" title="习近平在全国教育大会上强调 紧紧围绕立德树人根本任务 朝着建成教育强国战略目标扎实迈进">
						<img :src="item.img">
					</div>
					<div class="b">
						<span class="b-b1">{{item.title}}</span>
						<span class="b-b2">{{item.pubData}}</span>
						<p class="text-ellipsisl2">{{item.content}}</p>
					</div>
				</li>
			</ul>
		</div>
		<!-- 4大标题下内容结束 -->
	</div>

	<!-- 查看更多 -->
	<div class="loadmore">
		<span>查看更多</span>
		<span>
			<img src="../imges/more-icon-箭头.png" />
		</span>
	</div>


	<!-- 社会主义核心价值观 -->
	<img src="./imges/社会主义核心价值观.jpg" />

	<!-- 7大功能开始 -->
	<div class="pa">
		<div>
			<a href="" title="办事大厅">
				<img src="./imges/bsdt.png" />
				<span>办事大厅</span>
			</a>
		</div>
		<div>
			<a href="" title="科研创新">
				<img src="./imges/kycx.png" />
				<span>科研创新</span>
			</a>
		</div>
		<div>
			<a href="" title="数字校园">
				<img src="./imges/szxy.png" />
				<span>数字校园</span>
			</a>
		</div>
		<div>
			<a href="" title="学工动态">
				<img src="./imges/xgdt.png" />
				<span>学工动态</span>
			</a>
		</div>
		<div>
			<a href="" title="领导信箱">
				<img src="./imges/ldxx.png" />
				<span>领导信箱</span>
			</a>
		</div>
		<div>
			<a href="" title="驻省财政厅纪检监察组举报邮箱">
				<img src="./imges/czjb.png" />
				<span>驻省财政厅纪检监察组举报邮箱</span>
			</a>
		</div>
		<div>
			<a href="" title="学院举报邮箱">
				<img src="./imges/xyjb.png" />
				<span>学院举报邮箱</span>
			</a>
		</div>
	</div>
	<!-- 7大功能结束 -->

	<!-- 部门、招生开始 -->
	<div class="bmzs">
		<!-- 头部 -->
		<div class="hd2">
			<ul class="clearfix2">
				<li>
					<span class="hd-li-h">部门动态</span>
					<span class="hd-li-b hd-li-b1">/</span>
					<span class="hd-li-hs">Dynamics</span>
				</li>
				<li>
					<span class="hd-li-h">招生就业</span>
					<span class="hd-li-b hd-li-b1">/</span>
					<span class="hd-li-hs">Recruit</span>
				</li>
			</ul>
		</div>
		<!-- 内容 -->
		<div class="bd2" id="bd2">
			<div class="bd2-item1">
				<div class="bd2-item1-img">
					<img src="./imges//部门招生.png" />
				</div>
				<div class="item1-1">
					<span class="bd2-aa text-ellipsisl1">漆彩飞扬，扇韵传承——文化旅游学院开展漆扇文化创意活动</span>
					<span class="bd2-xian"></span>
					<span class="bd2-bb">2024-09-18</span>
					<p class="bd2-cc text-ellipsisl3">9月14日上午，文化旅游学院联合校企合作单位——庐山嘉豪淮海国际豪生酒店，举办漆扇非遗文化创意活动。
						此次活动旨在弘扬中华优秀传统文化，使学生近距离感受传统文化的魅力，增进对传统文化的理解和热爱。
						漆扇是一种以扇子为载体，运用国家级非遗漆染工艺手工染制而成的艺术品。活动现场人头攒动，气氛热烈。
						在专业人员的讲解与指导下，同学们学习漆艺中的“飘漆”技法，利用漆不溶于水的特质，以点、甩、弹、划等手法，在水面</p>
				</div>
			</div>
			<div class="bd2-item1">
				<div class="bd2-item1-img">
					<img src="./imges//部门招生.png" />
				</div>
				<div class="item1-1">
					<span class="bd2-aa text-ellipsisl1">漆彩飞扬，扇韵传承——文化旅游学院开展漆扇文化创意活动</span>
					<span class="bd2-xian"></span>
					<span class="bd2-bb">2024-09-18</span>
					<p class="bd2-cc text-ellipsisl3">9月14日上午，文化旅游学院联合校企合作单位——庐山嘉豪淮海国际豪生酒店，举办漆扇非遗文化创意活动。
						此次活动旨在弘扬中华优秀传统文化，使学生近距离感受传统文化的魅力，增进对传统文化的理解和热爱。
						漆扇是一种以扇子为载体，运用国家级非遗漆染工艺手工染制而成的艺术品。活动现场人头攒动，气氛热烈。
						在专业人员的讲解与指导下，同学们学习漆艺中的“飘漆”技法，利用漆不溶于水的特质，以点、甩、弹、划等手法，在水面</p>
				</div>
			</div>
		</div>


		<!-- 翻页 -->
		<div class="page">
			<div class="page-p">
				<div class="item pages">
					<img src="./imges/页面logo.png" />
				</div>
				<div class="item">
					<img src="./imges/页面logo.png" />
				</div>
				<div class="item">
					<img src="./imges/页面logo.png" />
				</div>
				<div class="item">
					<img src="./imges/页面logo.png" />
				</div>
				<div class="item">
					<img src="./imges/页面logo.png" />
				</div>
				<div class="item">
					<img src="./imges/页面logo.png" />
				</div>


			</div>
		</div>
	</div>
	<!-- 部门、招生结束 -->

	<!-- 专题栏目 -->
	<div class="ztlm">
		<div class="ztlm-title">
			<span class="ztlm-a">专题</span>
			<span class="ztlm-b">专栏/</span>
			<span class="ztlm-c">Special</span>
		</div>
	</div>

	<!-- 专题栏目图片 -->
	<div class="photos">
		<img src="./imges/专题图片1.jpg" />
		<img src="./imges/专题图片2.png" />
		<img src="./imges/专题图片3.jpg" />
		<img src="./imges/专题图片4.png" />
		<img src="./imges/专题图片1.jpg" />
		<img src="./imges/专题图片2.png" />

	</div>

	<!-- 站点地图	 -->
	<div class="zddt">
		<div class="zddt-title">
			<span class="zddt-a">站点</span>
			<span class="zddt-b">地图/</span>
			<span class="zddt-c">Site map</span>
		</div>
	</div>
	<!-- 下拉框 -->
	<div class="xlk">
		<!-- 下拉框头部 -->
		<div class="xlk-a">
			<ul class="tabs">
				<li>
					<div class="tab active">
						<span class="title">校务公开</span>
						<span class="iconfont icon-arrow-bottom_s"></span>
					</div>
				</li>
				<li>
					<div class="tab">
						<span class="title">党政机关</span>
						<span class="iconfont icon-arrow-bottom_s"></span>
					</div>
				</li>
				<li>
					<div class="tab">
						<span class="title">后勤服务</span>
						<span class="iconfont icon-arrow-bottom_s"></span>
					</div>
				</li>
				<li>
					<div class="tab">
						<span class="title">继续教育</span>
						<span class="iconfont icon-arrow-bottom_s"></span>
					</div>
				</li>
				<li>
					<div class="tab">
						<span class="title">网络服务</span>
						<span class="iconfont icon-arrow-bottom_s"></span>
					</div>
				</li>
			</ul>
		</div>
		<!-- 下拉框内容 -->
		<div class="tab-content">
			<div class="content elected">
				<ul>
					<li>
						<span class="dot"></span>
						<span class="text">校园通知</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">校园通知</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">校园通知</span>
					</li>
				</ul>
			</div>
			<div class="content ">
				<ul>
					<li>
						<span class="dot"></span>
						<span class="text">证书</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">证书</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">证书</span>
					</li>
				</ul>
			</div>
			<div class="content ">
				<ul>
					<li>
						<span class="dot"></span>
						<span class="text">服务</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">服务</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">服务</span>
					</li>
				</ul>
			</div>
			<div class="content ">
				<ul>
					<li>
						<span class="dot"></span>
						<span class="text">教育</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">教育</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">教育</span>
					</li>
				</ul>
			</div>
			<div class="content ">
				<ul>
					<li>
						<span class="dot"></span>
						<span class="text">网络</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">网络</span>
					</li>
					<li>
						<span class="dot"></span>
						<span class="text">网络</span>
					</li>
				</ul>
			</div>
		</div>

		<script>

		</script>

		<!-- 动画背景开始 -->
		<div class="anback">
			<ul class="anback-ul">
				<li>
					<img src="./imges/背景anback1.png" />
					<span>就业服务</span>
				</li>
				<li>
					<img src="./imges/背景anback2.png" />
					<span>校园风景</span>
				</li>
				<li>
					<img src="./imges/背景anback3.png" />
					<span>精品课程</span>
				</li>
				<li>
					<img src="./imges/背景anback4.png" />
					<span>政策法规</span>
				</li>
				<li>
					<img src="./imges/背景anback5.png" />
					<span>院校交流</span>
				</li>
				<li>
					<img src="./imges/背景anback6.png" />
					<span>职教集团</span>
				</li>
				<li>
					<img src="./imges/背景anback7.png" />
					<span>校友总会</span>
				</li>
			</ul>
		</div>


		<!-- last -->
		<div class="last">
			<!-- 头部 -->
			<div class="yqlj">
				<div class="yqlj-l">
					<span>友情链接/LINK</span>
				</div>
				<div class="conatiner">
					<ul class="fr">
						<li>
							<span class="iconfont icon-arrow-right-bold"></span>
							<span>江西省教育厅</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>江西省财政厅</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>江西省高教网</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>省教育考试院</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>江西省人民政府</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>南昌校区</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>九江人才网</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>大江网</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>大学生就业网</span>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-bold "></span>
							<span>省高校就业办</span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="footer">
				<div>
					<img src="./imges/logo23.png" />
				</div>
				<div class="footer-span">
					<span>浔阳校区地址：江西省九江市浔阳区青年路96号 邮编：332000 </span>
					<span>八里湖校区地址：江西省九江市八里湖新区八里湖大道216号 邮编：332000 </span>
					<span>电话：(0792)8224168 传真：(0792)8183196 邮编：332000 </span>
					<span>版权所有：江西财经职业学院版权所有 赣ICP备05003321号-1</span>
					<span class="footer-p-img">
						<img src="./imges/警徽.png" />
						赣公网安备36040302000140号
					</span>
				</div>
				<ul class="footer-ul">
					<li>
						<img src="./imges/last-二维码.png" />
						<span>官方微信</span>
					</li>
					<li>
						<img src="./imges/last-二维码2.png" />
						<span>中国教育督导</span>
					</li>
					<li>
						<img src="./imges/last-图标.png" />
					</li>
				</ul>
			</div>
		</div>

		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="../Nodejs-study/html/js/axios.js"></script>
		<script>
			// 循环动画步骤
			let imgEles = document.querySelectorAll('.anback .anback-ul img');
			[...imgEles].forEach((element) => {

				// 鼠标进入事件
				element.addEventListener("mouseenter", function () {
					this.classList.add("aniIn");
				});

				// 鼠标离开事件
				element.addEventListener("mouseleave", function () {
					this.classList.add("aniOut");
					setTimeout(() => {
						this.classList.remove("aniIn");
						this.classList.remove("aniOut");
					}, 900);
				});
			});

			// 图片轮播单击事件步骤
			// 1、找节点
			let dotEles = document.querySelectorAll('#banner .dots .dot');
			// 2、给节点循环绑定单击事件
			[...dotEles].forEach((aaa) => {
				aaa.addEventListener('click', function () {
					// 先把所有元素移除类名selected
					[...dotEles].forEach((bbb) => {
						bbb.classList.remove('selected');
					});
					// 再给自身元素加上类名selected
					this.classList.add('selected');
				});
			});


			// 部门动态（翻页）单击事件步骤
			// 1、找节点
			let pageEles = document.querySelectorAll('.page .page-p .item');
			// 2、给节点循环绑定单击事件
			[...pageEles].forEach((aaa) => {
				aaa.addEventListener('click', function () {
					// 先把所有元素移除类名pages
					[...pageEles].forEach((bbb) => {
						bbb.classList.remove('pages');
					});
					// 再给自身元素加上类名pages
					this.classList.add('pages');
				});
			});


			// 需求：循环遍历下拉框的鼠标悬浮功能，有背景色时字是白色，其他鼠标悬浮字是红色
			// 绑定鼠标悬浮和离开
			// 封装函数
			function tabOverOut() {
				let titleEles = document.querySelectorAll('.xlk .xlk-a .tabs .tab .title');
				[...titleEles].forEach((titleEle, index) => {
					// 排除身上有active类名的元素
					// 'on'+'mouseover'避免鼠标移入时重复
					titleEle.onmouseover = function () {
						console.log('mouseover');
						// 取反操作：
						// 当元素没有active时，鼠标移入字时，字变红，反之则不变红
						// active在父亲tab节点上，用parentElement
						if (!titleEle.parentElement.classList.value.includes('active')) {
							this.style.color = '#c3122c';
						};
					};
					// 'on'+'mouseout'避免鼠标移出时重复
					titleEle.onmouseout = function () {
						this.style.color = '';
					};
				});
			};
			tabOverOut();	//默认执行一次

			// 循环下拉框和内容的单击事件步骤
			// 1、找节点
			let tabsEles = document.querySelectorAll('.xlk-a .tabs .tab');
			let contentEle = document.querySelectorAll('.xlk .tab-content .content');
			// 2、给节点循环绑定单击事件
			[...tabsEles].forEach(function (element, index) {
				element.addEventListener('click', function () {

					// 先把所有元素移除类名active
					[...tabsEles].forEach((ele) => {
						ele.classList.remove('active');
					});
					// 再给自身元素加上类名active
					this.classList.add('active');
					tabOverOut();

					// 排他思想：
					// 先把所有类名为main元素都移除selected类名，
					[...contentEle].forEach(function (item) {
						item.classList.remove("elected");
					});
					// 后把单击相同的下标元素添加类名selected
					[...contentEle][index].classList.add("elected");
				});
			});

			//给4大标题下的内容转化为后端来源数据并用vue2，实现动态网站
			// 初始化Vue
			new Vue({
				el: "#app",
				data: {
					newsData: [],
				},
				mounted() {
					// 获取接口数据
					this.fetchNewsData();
				},
				methods: {
					async fetchNewsData() {
						let { data } = await axios({
							method: "get",
							url: "http://192.168.218.1:5522/news",
						});
						this.newsData = data;
					},
				},
			});
		</script>
</body>

</html>